// type: 不写默认蓝边框白背景 ; bule 蓝色底 ; stop 禁用状态 不可点击 // height:按钮高度 默认80rpx ; // width:按钮宽度 默认90% ; // fontSize：按钮中字体大小
默认27rpx; isTap 禁用状态下是否可点击
<template>
    <u-button
    @click="$emit('click')"
    :open-type="openType"
    :native-type="nativeType"
    :custom-style="btnCustomStyle"
    :hair-line="false"
    :disabled="disabled || isDisabled"
    @getphonenumber="getphonenumber"
    @getuserinfo="$emit('getuserinfo')"
    @opensetting="$emit('opensetting')"
    @launchapp="$emit('launchapp')"
    @error="$emit('error')"
    :type="type"
    :size="size"
    :loading="loading"
    >
        <slot></slot
        >
    </u-button>
</template>

<script>
export default {
    props: {
        height: String,
        fontSize: String,
        width: String,
        type: {
            type: String,
            default: 'scTheme'
        },
        size: {
            type: String,
            default: 'normal'
        },
        nativeType:String,
        openType: String,
        color: String,
        borderColor: String,
        background: String,
        isTap: Boolean,
        disabled: Boolean,
        loading: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            isDisabled: false, //是否禁用
        };
    },
    methods: {
        getphonenumber(res) {
            this.$emit("getphonenumber", res);
        },
    },
    computed: {
        btnCustomStyle() {
            const defaultStyle = {
                width: this.width || "630rpx",
                height: this.height || "104rpx",
                "font-size": this.fontSize || "40rpx",
                color: this.color || "#ffffff",
                "letter-spacing": "1px",
                border: this.borderColor ? `1px solid ${this.borderColor}` : "",
                "border-radius": "16rpx",
                background: this.background || "linear-gradient(136deg, #6DB6FF 0%, #349AFF 100%)",
            };
            const banStyle = {
                width: this.width || "630rpx",
                height: this.height || "104rpx",
                "font-size": this.fontSize || "40rpx",
                color: this.color || "#484848",
                "letter-spacing": "1px",
                border: this.borderColor ? `1px solid ${this.borderColor}` : "",
                "border-radius": "16rpx",
                background: this.background || "#F5F5F5",
                // "box-shadow": "0px 3px 6px rgba(0, 0, 0, 0.16)",
            };

            let outPut = defaultStyle;
            this.isDisabled = false;

            switch (this.type) {
                case "stop":
                    // this.isDisabled = this.isTap ? false : true; //禁用按钮点击
                    outPut = banStyle;
                    break;
                case "scTheme":
                    // this.isDisabled = this.isTap ? false : true; //禁用按钮点击
                    outPut = defaultStyle;
                    break;
                default:
                    outPut = {
                        width: this.width || "630rpx",
                        height: this.height || "104rpx",
                        "font-size": this.fontSize || "40rpx",
                        "letter-spacing": "1px",
                        "border-radius": "16rpx",
                    }
            }
            let styleStr = "";
            Object.keys(outPut).forEach((key) => {
                styleStr += `${key}:${outPut[key]};`;
            });
            return styleStr;
        },
    },
};
</script>
<style lang="scss" scoped></style>
